<template>
  <div class="app-iframe-container">
    <!-- 搜索 -->
    <el-row>
      <el-form label-suffix="：" label-width="150px" label-position="right">
        <el-row>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="queryParam.status">
                <el-option label="全部" value=""/>
                <el-option v-for="item in enums.orderStatusEnum" :label="item.text" :key="item.value" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="兑换时间">
              <el-date-picker
                v-model="form.addDateRange"
                type="daterange"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" el-col style="text-align: center;">
            <el-button type="warning" size="small" icon="el-icon-search" @click="research">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-row>
    <!-- /搜索 -->
    <el-row >
      <el-col :span="24" >
        <el-button :disabled="multipleSelection.length===0" type="primary" @click="orderExport">订单导出</el-button>
      </el-col>
    </el-row>
    <!-- 表格内容 -->
    <el-row>
      <el-col :span="24">
        <el-table
          :data="data"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column align="center" width="65" label="序列号">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="订单ID" prop="id"/>
          <el-table-column label="会员ID" prop="member.appUserId"/>
          <el-table-column label="会员名称" prop="member.appUserName"/>
          <el-table-column label="产品名称" prop="product.name"/>
          <el-table-column label="产品图片" >
            <template slot-scope="scope">
              <img :src="scope.row.product.imageUrl" width="60" height="60">
            </template>
          </el-table-column>
          <el-table-column label="状态" >
            <template slot-scope="scope">
              {{ scope.row.status | dictFilter(enums.orderStatusEnum) }}
            </template>
          </el-table-column>
          <el-table-column label="兑换时间" >
            <template slot-scope="scope">
              {{ scope.row.addDate | parseDateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="text" @click="toDetail(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- /表格内容 -->
    <!-- 分页 -->
    <div class="pagination-container">
      <pagination v-show="queryParam.total>0" :current-page="queryParam.current" :page-sizes="appCommon.pageSize" :page-size="queryParam.size" :total="queryParam.total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <!-- /分页 -->
  </div>
</template>

<script>

import orderApi from '@/api/order/order'
import orderStatusEnum from '@/enums/order/orderStatusEnum'
import SmallImage from '@/components/SmallImage'
import { exportFile } from '@/utils/exportFile'

export default {
  name: 'OrderList',
  components: {
    SmallImage
  },
  data() {
    return {
      listLoading: false,
      currentRow: '',
      queryParam: {
        current: 1,
        size: 10,
        total: 0,
        status: null,
        addDateBegin: '',
        addDateEnd: ''
      },
      enums: {
        orderStatusEnum
      },
      form: {
        addDateRange: ''
      },
      data: [],
      multipleSelection: [],
    }
  },
  computed: {

  },
  mounted() {
    this.search()
  },
  methods: {
    // 处理选择的变化
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.size = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.current = val
      this.search()
    },
    // 列表
    search() {
      this.listLoading = true
      if (this.form.addDateRange) {
        this.queryParam.addDateBegin = this.form.addDateRange[0]
        this.queryParam.addDateEnd = this.form.addDateRange[1]
      } else {
        this.queryParam.addDateBegin = ''
        this.queryParam.addDateEnd = ''
      }
      orderApi.page(this.queryParam).then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.data = responseData.records
          this.queryParam.current = responseData.current
          this.queryParam.total = responseData.total
          this.currentRow = ''
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    // 重置分页条件，发起查询
    research() {
      this.queryParam.current = 1
      this.search()
    },
    // 详情
    toDetail(id) {
      this.callNewPage(`/order/detail/${id}`)
    },
    orderExport() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择订单')
        return
      }
      var postData = {}
      var idArray = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        idArray.push(this.multipleSelection[i].id)
      }
      postData.ids = idArray.join(',')
      postData.skipLoading = true
      exportFile(orderApi.exportData, postData)
    }
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .danger{
    color:#F56C6C
  }
</style>
